<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>成果列表</title>
    <link rel="stylesheet" type="text/css" href="/frontdesk/css/common.css">
    <link rel="stylesheet" href="/frontdesk/css/search.css">
    <script src="/frontdesk/js/jquery-3.3.1.js"></script>
    <!--    分页插件-->
    <script src="/frontdesk/js/bootstrap-paginator.js"></script>
    <style>
        .logo img{
            display: none;!important;
        }
    </style>
</head>

<body>
    <!--引入头部-->
    <header th:replace="~{/frontdesk/header::header}"></header>
    <div class="search" th:fragment="search">
        <form action="/frontdesk/gramtoo/gramtooList">
            <input name="gramtooName" type="text" th:value="${gramtooName}" placeholder="" class="search_input"
                   autocomplete="off">
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>

    <div class="page_one">
        <div class="contant">
            <div class="left">
                <ul>
                    <li th:each="gramtoo:${gramtooPage.records}">
                        <div style="width: 320px;">
                            <img th:src="${gramtoo.pImage}" width="320">
                        </div>
                        <div class="content">
                            <p class="title" th:text="${gramtoo.gramtooName}"></p>
                            <div class="desc" th:utext="${gramtoo.gramtooDesc}" style="color: #001f3f; font-size: 14px;text-indent: 2em;line-height: 1.5;"></div>
                        </div>
                    </li>

                </ul>
                <!-- .box-footer-->
                <div class="box-footer">

                    <div class="box-tools pull-right">
                        <ul class="pagination"></ul>
                    </div>
                </div>

                <!-- 在js中获取Model的值 -->
                <script th:inline="javascript">
                    $(function () {
                        var currentPage = [[${gramtooPage.current}]]; // 当前页
                        var pages = [[${gramtooPage.pages}]]; // 总页数

                        // 分页插件
                        $('.pagination').bootstrapPaginator({
                            bootstrapMajorVersion: 3, // bootstrap版本
                            currentPage: currentPage, // 当前页
                            totalPages: pages, // 总页数
                            numberOfPages: 5, // 最多显示多少页
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "首页";
                                    case "prev":
                                        return "上一页";
                                    case "next":
                                        return "下一页";
                                    case "last":
                                        return "末页";
                                    case "page":
                                        return page;
                                }
                            },
                            onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
                                location.href = "/frontdesk/gramtoo/gramtooList?page=" + page;
                            }
                        });
                    })
                </script>
            </div>

        </div>
    </div>
    </div>
    </div>


    <script>
        // 获取所有的li元素  
        const navItems = document.querySelectorAll('.nav li');

        // 移除其他li元素的active类名  
        navItems.forEach(li => {
            li.classList.remove('nav-active');
        });
        navItems[2].classList.add('nav-active')

    </script>
</body>

</html>